CSS horizontal drop down menu

[mjohnson0321]

I am trying to incorporate a CSS drop-down menu into a site (suckerfish menu). The menu gets lost behind the content below it, but only on one of the drop downs (News). The error occurs on all of the browsers I have tested it on (IE6, IE7, Firefox, Opera and Safari). It is probably something simple, but I can't find it!

Here is the CSS (using external style sheets):

style-temp.css (Main style sheet for the site):

* {
  font-family: verdana, arial, sans-serif;
}
 
body {
  background: url('gfx/bg.jpg') repeat-x fixed;
  text-align: center;
  font-size: 73%;
  margin: 0;
  padding: 0;
}
 
a {
  color: #449;
}
 
a:hover {
  color: #246;
}
 
a:visited {
  color: #69a;
}
 
a.cvs_enter {
  text-align: center;
  display: block;
  background: #035;
  height: 23px;
  padding-top: 10px;
  color: #fff;
  border: 1px solid #69b;
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
  text-decoration: none;
  font-weight: bold;
  margin: 20px 50px;
}
 
a.cvs_enter:hover {
  background: #369;
  color: #fff;
}
 
h2 {
  margin: 25px 0;
  font-size: 15pt;
  font-weight: normal;
  color: #78b;
}
 
h2 span {
  color: #999;
}
 
h3 {
  font-size: 12pt;
  font-weight: normal;
  margin: .2em 0;
  color: #666;
}
 
h4 {
  font-size: 11pt;
}
 
sup.tm {
  font-size: .5em;
}
 
#wrap {
  width: 790px;
  margin: 0 auto 20px auto;
  text-align: left;
  background: #fff;
}
 
#menu_area {
    padding-left: 25px;
    text-align: center;
    height: 31px;
    background: url('gfx/menu_bg.jpg') no-repeat;
    overflow: hidden;
}
 
#nav, #nav ul {
    float: left;
    width: 740px;
    list-style: none;
    line-height: 1;
    background:  url('gfx/menu_over_1.jpg') repeat-x;
    /*font-weight: bold;*/
    padding: 0;
    /*border: solid #434261;*/
    /*border-width: 1px 0;*/
    margin: 0 0 1em 0;
    text-align: left;   /*added by me*/
    font-size: 8pt;     /*added by me*/
    white-space: normal; /*added by me*/
}    
 
#nav a {
    display: block;
    /*width: 10em;
    w\idth: 6em;*/
    color: #000;
    text-decoration: none;
    padding: 3px 20px 3px 20px;
    font-size: 8pt;  /*added by me*/
}
 
#nav a.arrow {
    background: url(rightarrow2.gif) center right no-repeat;
}
 
#nav li {
    float: left;
    padding-top: 6px;  /*padding: 0;*/
    /*width: 8em;*/
    height: 25px;
    /*margin: 0;
    display: inline;
    white-space: nowrap;*/
}
 
/* LEVEL 1 DROP DOWN  - WHOLE LIST */
#nav li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width: 12.4em;
    w/idth: 11.9em;
    font-weight: normal;
    border-width: 0.25em;
    margin-top: 6px;  /* margin: 0;*/
    /*display: inline;
    white-space: nowrap;*/    
}
 
/* LEVEL 1 DROP DOWN  - INDIVIDUAL ITEMS */
#nav li li {
    padding-left: 1em;
    width: 13.5em;
    text-align: left;
    background: #D8D8D8;
    border-bottom: 1px solid #434261; /*added by me*/
    border-left: 1px solid #434261;   /*added by me*/
    border-right: 1px solid #434261;  /*added by me*/
    white-space: nowrap;  /* DON'T TAKE THIS OUT!  IT STOPS LINE WRAPPING ON THE SUBMENU */
}
 
#nav li ul a {
    width: 13em;
    w\idth: 9em;
    padding-left: 0px;
}
 
#nav li ul ul {
    margin: -1.75em 0 0 14em;
}
 
#nav li:hover ul ul, 
#nav li:hover ul ul ul, 
#nav li.sfhover ul ul, 
#nav li.sfhover ul ul ul {
    left: -999em;
}
 
#nav li:hover ul, 
#nav li li:hover ul, 
#nav li li li:hover ul, 
#nav li.sfhover ul,
#nav li li.sfhover ul, 
#nav li li li.sfhover ul {
    left: auto;
}
 
#nav li:hover, 
#nav li.sfhover {
    background: #fbfbfb;
}
 
#vert_menu {
    text-align: left;
    text-indent: 1em;
    width: 185px;
    margin-left: 11px;
    _margin-left: 5px;
    background: url('gfx/vmenu_bg.jpg');
    float: left;
}
 
#vert_menu a {
    color: #fff;
    width: 185px;
    height: 25px;
    background: url('gfx/vmenu_bg.jpg') no-repeat;
}
 
#vert_menu a:hover {
    color: #ccc;
}
 
#vert_menu img {
    border: 3px solid #225;
    margin: 4px 0 0 4px;
}
 
#vert_menu p {
    text-indent: 0;
    padding: 20px 10px;
    color: #efefef;
}
 
#vert_menu_bot {
    /*  margin-top: 10px;*/
    height: 50px;
    background: url('gfx/vmenu_bot.jpg') no-repeat center bottom;
}
 
#content {
    float: left;
    width: 550px;
    margin-left: 17px;
    min-height: 500px;
    _height: 500px;
}
 
#content p {
    line-height: 1.5;
    text-align: justify;
    margin: 20px 0;
}
 
.float_note {
    width: 350px;
    text-align: left;
    line-height: 1.5;
    background: #035;
    color: #fff;
    padding: 1.2em;
    float: right;
    margin: .5em 0 .8em 1.5em;
}
 
.float_note h3 {
    font-size: 10pt;
    font-weight: bold;
    color: #fff;
}
 
.setleft {
    text-align: left;
}
 
/*  Lists        */
 
#content ul {
    list-style-type: none;
    padding: 1em 2em 1em 4em;
}
 
#content li {
    margin: 1em;
    color: #444;
    list-style-type: none;
    line-height: 1.5;
    padding-left: 14px;
    background: url('gfx/bullet.jpg') no-repeat 0 5px;
}
 
#content li ul li {
    font-size: .95em;
    background: url('gfx/subbullet.jpg') no-repeat 0 4px;
    color: #666;
}
 
#content li ol li {
    font-size: .95em;
    list-style-type: decimal;
    color: #666;
}
 
/*   Tables   */
 
#content table {
    margin: 1.2em 0;
    font-size: .96em;
    border-bottom: 1px solid #efefef;
    width: 550px;
}
 
#content table th, #content table td {
    padding: 5px 10px;
    border-top: 1px solid #efefef;
    border-right: 1px solid #efefef;
}
 
#content table th {
    border: none;
    color: #fff;
    text-align: left;
    background: #225;
}
 
#content table.noborder  {margin: 1.2em 0 0 0; font-size: 1.0em;  border-bottom: 0px solid #efefef; width: 550px;}
#content table.noborder th  {border: 0px;}
#content table.noborder td  {border: 0px; vertical-align:top;}
#content table.noborder tr  {border: 0px;}
 
#content table.noborder2  {margin: 0 0 0 0; font-size: 1.0em;  border-bottom: 0px solid #efefef; width: 550px;}
#content table.noborder2 th  {border: 0px;}
#content table.noborder2 td  {border: 0px; vertical-align:top;}
#content table.noborder2 tr  {border: 0px;}
 
#content ol.number li {
    font-size: 1.0em;
    list-style-type: decimal;
    background: #FFF;
    padding-left: 3px;
    margin-left:20px;
}
 
td.tbl_date {
    width: 150px;
    height: 40px;
    text-align: center;
    color: #555;
    border-left: 1px solid #efefef;
    background: #fafafa;
}
 
table thead th.dl_head {
    background: #024 !important;
}
 
table td.tbl_dl_label, table td.tbl_cvs_param {
    width: 280px;
    border-left: 1px solid #efefef;
}
 
table td.tbl_dl_link {
    background: #f3f5fa;
}
 
table td.tbl_cvs_param {
  width: 100px;
}
 
#footer {
  text-align: center;
  padding-top: 20px;
  height: 30px;
  background: url('gfx/footer.jpg') no-repeat bottom center;
  clear: both;
}
 
 
/* Forms */
 
fieldset {
  border: solid 0 transparent;
  border-bottom: 1px solid #eaeaea;
  margin: 2em 0;
  padding: 0 0 1em 0;
}
 
fieldset div {
  margin: 1em 0;
}
 
 
label, .checkbox_float div label {
  float: left;
  width: 220px;
  height: 22px;
  line-height: 22px;
  margin-right: 12px;
  text-align: right;
}
 
input, select {
  width: 180px;
}
 
textarea {
  width: 300px;
  height: 100px;
}
 
input.submit {
  margin-left: 232px;
}
 
 
 splash-temp.css (Style sheet for the splash page that has the error):  
 
#col_left, #col_right, #col_center {
    margin-top: 12px;
    width: 260px;
    float: left;
}
#col_left {
    margin-left: 4px;
}
 
.sect {
    margin: 0 8px 15px 8px;
    background: url('gfx/sect_bg.jpg') repeat-y;
}
.sect h2 {
    font-size: 11pt;
    color: #fff;
    background: url('gfx/sect_head.jpg') no-repeat;
    height: 32px;
    padding: 9px 0 0 10px;
    margin: 0;
    font-weight: normal;
}
.sect h2 a {
    text-decoration: none;
    color: #fff;
}
 
 
.sect_body {
    height: 182px;
}
 
 
.sect_download .sect_body {
    height: auto;
    min-height: 182px;
    position: relative;
    margin: 0px auto 0px auto;   
    overflow:hidden;
}
.sect_download h2 {
    height: 36px;
    margin-top: -4px;
    padding-top: 13px;
    background: url('gfx/sect_dl_head.jpg') no-repeat;
    position: relative;
    /*top:0px;
    left:0px;*/
    z-index: 1;
}
 
.sect_download a.download {
    display: block;
    width: 226px;
    height: 51px;
    background: url('gfx/dl_link.jpg') no-repeat;
    margin: 0 0 2px 9px;
    overflow: hidden;
    position: relative;
}
 
.sect_download p {
    margin-bottom: 4px;
}
 
.sect_download a.download span {
    display: none;
}
 
.sect_download a.download:hover {
    background: url('gfx/dl_link_hover.jpg') no-repeat;
}
 
.sect_foot {
    height: 28px;
    background: url('gfx/sect_foot.jpg') no-repeat left bottom;
}
 
.sect_foot_dwnld {
    height: 28px;
    margin-top:3px;
    background: url('gfx/sect_foot.jpg') no-repeat left bottom;
}
 
.sect p, .sect ul {
    padding: 5px 14px;
}
 
#content .sect p {
    text-align: left;
    line-height: 1.5;
    margin: 0;
}
 
#content .sect li, #content .sect ul {
    display: block;
    list-style-type: none;
    padding: 1em;
}
 
#content .sect li {
    margin: 0;
    padding: 1px;
    color: #444;
    list-style-type: none;
    line-height: 1;
    width: 210px;
    background: none;
}
 
#content .sect li a {
    text-decoration: none;
    color: #68a;
    border: 1px solid #9bd;
    background: #ccffcc;
    display: block;
    padding: 6px 6px;
    margin: 4px 0;
    height: 1.3em;
}
 
#content .sect li a:hover {
    background: #ffffe0;
    color: #468;
    border: 1px solid #69c;
}
 
#content {
    width: 790px;
    margin-left: 1px;
}
 
#menu_area {
    padding-left: 25px;
    text-align: center;
    height: 31px;
    background: url('gfx/menu_bg_splash.jpg') no-repeat;
    overflow: hidden;
}
 

index-splash.html (Splash page html file):
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Splash</title>

<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />

<!-- CSS -->
<link rel="stylesheet" href="style-temp.css" media="screen,projection" type="text/css" />
<link rel="stylesheet" href="splash-temp.css" media="screen,projection" type="text/css" />

<!-- JavaScript -->
<script src="scripts/swfobject.js" type="text/javascript"></script>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagNam e("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>
<div id="wrap">
<div id="headerflash"><p style="color:white">Splash</p></div>

<div id="menu_area">
<ul id="nav">
<li><a href="?p=0" class="center">Home</a></li>
<li><a name="About Us">About Us</a>
<ul>
<li><a href="?p=1&amp;sub=0">Who We Are</a></li>
<li><a href="?p=1&amp;sub=1">Mission Statement</a></li>
<li><a href="?p=1&amp;sub=2">Presentations</a></li>
<li><a href="?p=1&amp;sub=3">Careers</a></li>
<li><a href="?p=1&amp;sub=4">FAQ</a></li>
</ul>
</li>
<li><a name="Clients">Clients</a>
<ul>
<li><a href="?p=2&amp;sub=0">Enterprises</a></li>
<li><a href="?p=2&amp;sub=1">Software Vendors</a></li>
<li><a href="?p=2&amp;sub=2">Service Providers</a></li>
</ul>
</li>
<li><a name="Products & Services">Products & Services</a>
<ul>
<li><a href="?p=3&amp;sub=0">Products</a></li>
<li><a href="?p=3&amp;sub=1">Services</a></li>
<li><a href="?p=3&amp;sub=2">Connectors</a></li>
<li><a href="?p=3&amp;sub=3">OpenII Toolkit</a></li>

<li><a href="?p=3&amp;sub=4">Training</a></li>
<li><a href="?p=3&amp;sub=5">Toolkit FAQ</a></li>
</ul>
</li>
<li><a href="?p=4" class="center">Demo</a></li>
<li><a name="News">News</a>
<ul>
<li><a href="?p=5&amp;sub=0">Announcements</a></li>
<li><a href="?p=5&amp;sub=1">Press Release</a></li>
</ul>
</li>
<li><a href="?p=6" class="center">Contact Us</a></li>
</ul>
</div>

<div id="content">
<div id="col_left">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=6">News</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
<div class="sect">
<div class="sect_body">
<h2><a href="?p=1">About Us</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>
</div>

<div id="col_center">
<div class="sect">
<div class="sect_body">
<h2><a href="?p=3">Products &amp; Services</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"></div>
</div>

<div class="sect">
<div class="sect_body">
<h2><a href="?page=employment">Employment</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>

<div id="col_right">
<div class="sect sect_download">
<div class="sect_body">
<h2><a href="?page=downloads">ESB Demo</a></h2>
<a href="?" class="download"><span>Download Now</span></a>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>

<div class="sect">
<div class="sect_body">
<h2><a href="?page=links">Links</a></h2>
<p>Content goes here!</p>
</div>
<div class="sect_foot"> </div>
</div>
</div>
</div>


<div id="footer">
&copy; 2007 All Rights Reserved. For more information <a href="?p=7" title="Click here to contact us.">contact us</a>.
</div>
</div>
</body>
</html>[/html]